<template>
  <div>
    <router-view />

    <van-tabbar :v-model="active_idx" route :placeholder="true">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/skills_list" icon="wap-nav"
        >技能详情页</van-tabbar-item
      >
      <van-tabbar-item to="/zb" icon="records">装备</van-tabbar-item>
      <van-tabbar-item to="/settings" icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant'
import { ref } from 'vue'
export default {
  name: 'Index',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  props: ['active_idx'],
  setup() {
    const active = ref(0)
    return { active }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
